<template>
    <div>
        <el-card>
            <el-container>
                <el-header v-text="msg"></el-header>
                <el-container>
                    <el-main>
                        <el-row>
                            <el-col :span="2">接收</el-col>
                            <el-col :span="22">
                                <el-input
                                        type="textarea"
                                        :rows="10"
                                        placeholder="接收到的消息"
                                        v-model="msgReceive">
                                </el-input>
                            </el-col>
                        </el-row>
                    </el-main>
                    <el-main>
                        <el-row>
                            <el-col :span="2">
                                待发送
                            </el-col>
                            <el-col :span="22">
                                <el-input
                                        type="textarea"
                                        :rows="5"
                                        placeholder="准备发送的消息"
                                        v-model="msgSend">
                                </el-input>
                            </el-col>
                        </el-row>
                    </el-main>
                    <el-footer class="left">
                        <el-button type="success" @click="sendMessage">发送</el-button>
                    </el-footer>
                </el-container>
            </el-container>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data: () => ({
            textarea: '',
            msgSend: '',
            msgReceive: '',
            wsPath: "ws://127.0.0.1:34567",
            socket: "",
        }),
        created() {
            this.initWebSocket();
        },
        destroyed() {
            this.websock.close() //离开路由之后断开websocket连接
        },
        methods: {
            sendMessage(){
                this.websocketsend(this.msgSend)
            },
            initWebSocket(){ //初始化weosocket
                this.websock = new WebSocket(this.wsPath);
                this.websock.onmessage = this.websocketOnMessage;
                this.websock.onopen = this.websocketOnOpen;
                this.websock.onerror = this.websocketOnError;
                this.websock.onclose = this.websocketclose;
            },
            websocketOnOpen(){ //连接建立之后执行send方法发送数据
                let actions = {"test":"12345"};
                this.websocketsend(JSON.stringify(actions));
            },
            websocketOnError(){//连接建立失败重连
                this.initWebSocket();
            },
            websocketOnMessage(e){ //数据接收
                const redata = JSON.parse(e.data);
                console.log("接收到的数据:"+redata)
            },
            websocketsend(Data){//数据发送
                this.websock.send(Data);
            },
            websocketclose(e){  //关闭
                console.log('断开连接',e);
            },
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
